<template>
    <div>
        <div>
            <el-button icon="el-icon-back" @click="back"
                       style="background-color: #ffffff;color: #0103af;font-weight:bold ">返回
            </el-button>
        </div>
        <el-divider content-position="center"><span style="font-size: 17px;color: #ff0000;font-weight:bold">疑似/确诊人员管理</span>
        </el-divider>
        <div class="divstyle">
            <el-card class="box-card">
                <el-table stripe border :data="AllUserForm.slice((currentPage-1)*pageSize,currentPage*pageSize)">
                    <el-table-column label="ID" prop="uid" width="60" align="center"></el-table-column>
                    <el-table-column label="用户名" prop="uname" align="center"></el-table-column>
                    <el-table-column label="性别" prop="sex" align="center"></el-table-column>
                    <el-table-column label="年龄" prop="age" align="center"></el-table-column>
                    <el-table-column label="电话" prop="tel" align="center"></el-table-column>
                    <el-table-column label="住址" prop="address" align="center"></el-table-column>
                    <el-table-column label="健康状况" prop="health" align="center"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    plain
                                    @click="temperatureInfo(scope.row.uid)">体温
                            </el-button>
                            <!--scope.$index→拿到每一行的index;scope.$row→拿到每一行的数据-->
                            <el-button
                                    size="mini"
                                    type="danger"
                                    plain
                                    @click="getHealth(scope.row.uid)">健康
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="divstyle">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   small
                                   background
                                   :page-sizes="[5,10,20,100]" :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper" :total="AllUserForm.length">
                    </el-pagination>
                </div>
            </el-card>
        </div>



        <el-dialog title="此页面只展示前7条体温数据" :visible.sync="dialogTableVisible" center width="30%">
            <el-table :data="Temperature7" size="mini">
                <el-table-column property="tim" label="日期" align="center"></el-table-column>
                <el-table-column property="tem" label="体温" align="center"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
            </span>
        </el-dialog>


        <el-dialog title="请选择健康状态" :visible.sync="dialogFormVisible" center width="33%">
            <el-form :model="healthForm">
                <el-form-item label="健康状态" :label-width="formLabelWidth">
                    <el-select v-model="healthForm.health" placeholder="请选择健康状态">
                        <el-option label="健康" value="健康" style="color: #00ff48"></el-option>
                        <el-option label="疑似" value="疑似" style="color: #fff000"></el-option>
                        <el-option label="确诊" value="确诊" style="color: #ff1e00"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateHealth">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "yisiPeople",
        data() {
            return {
                currentPage: 1, // 当前页码
                pageSize: 5,// 每页的数据条数
                AllUserForm: [],
                AllTemperature: [],
                Temperature:[],
                Temperature7: [],
                dialogTableVisible: false,
                dialogFormVisible:false,
                formLabelWidth: '100px',
                healthForm:{uid:"",health:"",}
            }
        },
        created() {
            this.getAllUserByHealth()
        },
        methods: {
            async getAllUserByHealth() {
                const {data: res_j} = await this.$http.get("getAllUserByHealth");
                this.AllUserForm = res_j
            },
            async temperatureInfo(row) {
                const {data: res} = await this.$http.get("getAllTemperature?tid=" + row);
                this.AllTemperature = res;
                console.log(this.AllTemperature)
                for(var i = 0;i<7;i++){
                    this.Temperature[i] = this.AllTemperature[i]
                }
                console.log(this.Temperature)
                this.Temperature7 = this.Temperature
                this.dialogTableVisible = true;
            },
            getHealth(row){
                this.healthForm.uid = row;
                this.dialogFormVisible=true;
            },
            async updateHealth() {
                console.log(this.healthForm)
                const {data: res} = await this.$http.post("updateUserHealth",this.healthForm);
                if(res==="ok"){
                    this.$message.success("修改成功")
                    this.dialogFormVisible = false
                    await this.$router.push({path: "/404"});
                    await this.$router.push({path: "/yisiPeople"})
                }else{
                    this.$message.error("修改失败")
                    this.dialogFormVisible = false
                }
            },
            back() {
                this.$router.go(-1);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
        }
    }
</script>

<style scoped>
    .divstyle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box-card {
        width: 90%;
    }
</style>